<template>
  <div class="goods">
  	<div class="menu-wrapper" ref="menuWrapper">
  		<ul>
  			<li v-for="(item, index) in goods" class="menu-item" :class="{'current':currentIndex === index}" @click="selectMenu(index, $event)">
  				<span class="text border-1px">
  					<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
  				</span>
  			</li>
  		</ul>
  	</div>
	<div class="foods-wrapper" ref="foodWrapper">
		<ul>
			<li v-for="item in goods" class="food-list food-list-hoot">
				<h1 class="title">{{ item.name }}</h1>
				<ul>
					<li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
						<div class="icon">
							<img width="57" height="57" :src="food.icon">
						</div>
						<div class="content">
							<h2 class="name">{{food.name}}</h2>
							<p class="desc">{{food.description}}</p>
							<div class="extra">
								<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
							</div>
							<div class="price">
								<span class="now">￥{{food.price}}</span>
								<span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
							</div>
							<div class="cartcontrol-wrapper">
								<cart-control :food="food"></cart-control>
							</div>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<shop-cart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shop-cart>
  	<my-food :food="selectedFood" ref="food"></my-food>
  </div>
</template>

<script type="text/javascript">

import BScroll from 'better-scroll'
import shopCart from '../shopcart/shopcart'           // 购物车组件
import cartControl from '../cartcontrol/cartcontrol'  // 商品加减按钮组件
import myFood from '../food/food'  // 详情页


const ERR_OK = 0

export default{
	components: {
		shopCart, cartControl, myFood
	},
	props: ['seller'],
	data(){
		return {
			goods: [],
			listHeight: [],
			scrollY: 0,
			selectedFood: {}
		}
	},
	computed: {   // 计算属性
		currentIndex(){
			for(let i = 0; i < this.listHeight.length; i++){
				let height1 = this.listHeight[i]
				let height2 = this.listHeight[i + 1]
				if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
					return i
				}
			}
			return 0
		},
		selectFoods(){     // 商品件数响应到购物车组件
			let foods = []
			this.goods.forEach((good) => {
				good.foods.forEach((food) => {
					if(food.count){
						foods.push(food)
					}
				})
			})
			return foods
		}
	},
	created(){   // 实例被创建
    	this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

		this.$http.get('/api/goods').then((response) => {
	      response = response.body
	      if(response.errno === ERR_OK){
	        this.goods = response.data
	        this.$nextTick(() => {      // 解决 DOM 渲染异步问题
		        this._initScroll()      // 初始化 BScroll
		        this._calculateHelght() // 计算高度实现联动
	        })
	        console.log( this.goods )
	      }
		}) 
	},
	methods: {
		selectMenu(index, event){    // 导航被单击的时候对应到相应商品
			if( !event._constructed ){
				return     // 判断是原生的click事件还是BScroll派发的click事件，如果是原生的事件就执行返回 不然click在pc端会重复
			}
			let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hoot")
			let el = foodList[index]  // 要滚动到的位置
			this.foodScroll.scrollToElement(el, 300) // BScroll自带的滚动接口 
		},
		selectFood(food, event){     // 点击打开详情页
			if( !event._constructed ){
				return     // 判断是原生的click事件还是BScroll派发的click事件，如果是原生的事件就执行返回 不然click在pc端会重复
			}
			this.selectedFood = food
			this.$refs.food.show()
		},
		_drop(target){
			// this.$refs.shopcart.drop(target)
			// 购物车小球动画预留方法
		},
		_initScroll(){       // 初始化 BScroll
			this.menuScroll = new BScroll(this.$refs.menuWrapper, {
				click: true
			})
			this.foodScroll = new BScroll(this.$refs.foodWrapper, {
				click: true,
				probeType: 3
			})
			this.foodScroll.on("scroll", (pos) => {
				this.scrollY = Math.abs( Math.round(pos.y) )
			})
		},
		_calculateHelght(){  // 计算高度实现联动
			let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hoot")  // 拿到右侧各种分类商品
			let height = 0
			this.listHeight.push(height)
			for(let i = 0; i < foodList.length; i++){
				let item = foodList[i]
				height += item.clientHeight
				this.listHeight.push(height - 2)   // -2是为了做矫正
			}
			// console.log(this.listHeight)
		}
	},
	events: {
		'cart.add'(target){
			// this._drop(target)
		}
	}
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

border-1px($color)
  position: relative
  &:after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    display: block
    width: 100%
    border-top: 1px solid $color
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")
.clearfix
    display: inline-block
    &:after
        display: block
        content: '.'
        height: 0
        line-height: 0
        clear: both
        visibility: hidden
border-none()
	&:after
		display none

.goods
	display flex
	position absolute
	top 174px
	bottom 64px
	width 100%
	overflow hidden
	.menu-wrapper
		flex 0 0 80px
		width 80px
		background #f3f5f7
		.menu-item
			display table
			height 54px
			width 56px
			padding 0 12px
			line-height 14px
			&.current
				position relative
				margin-top -1px
				z-index 10
				background #fff
				font-weight 700
				.text
					border-none()
			.icon
                display: inline-block
                width: 12px
                height: 12px
                margin-right: 2px
                background-size: 12px 12px
                background-repeat: no-repeat
                &.decrease
                    bg-image('decrease_3')
                &.discount
                    bg-image('discount_3')
                &.guarantee
                    bg-image('guarantee_3') 
                &.invoice
                    bg-image('invoice_3') 
                &.special
                    bg-image('special_3') 
            .text
            	display table-cell
            	width 56px
            	vertical-align middle
            	border-1px(rgba(7,17,27,0.1))
				font-size 12px            	

	.foods-wrapper
		flex 1
		.title
			padding-left 14px
			height 26px
			line-height 26px
			border-left 2px solid #d9dde1
			font-size 12px
			color rgb(147,153,159)
			background #f3f5f7
		.food-item
			display flex
			margin 18px
			padding-bottom 18px
			border-1px(rgba(7,17,27,0.1))
			&:last-child
				border-none()
				margin-bottom 0
			.icon
				flex 0 0 57px
				margin-right 10px
			.content
				flex 1
				.name
					margin 2px 0 8px 0
					height 14px
					line-height 14px
					font-size 14px
					color rgb(7,17,27)
				.desc,.extra
					line-height 10px
					font-size 10px
					color rgb(147,153,159)
				.desc
					margin-bottom 8px
					line-height 12px
				.extra
					.count
						margin-right 12px
				.price
					font-weight 700
					line-height 24px
					.now
						margin-right 8px
						font-size 14px
						color rgb(240,20,20)
					.old
						text-decoration line-through
						font-size 10px
						color rgb(147,153,159)
				.cartcontrol-wrapper
					position absolute
					right 0
					bottom 12px

</style>

